<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" center>
    <div v-if="isSuccess" class="text-center fontDiv">
      <p>您确定要退款吗？</p>
      <p>
        （点击查看<span class="blue-font pointer" @click="toDetails">退款明细</span>）
      </p>
    </div>
    <div v-else class="text-center fontDiv">
      <img src="../../../../assets/images/refund_tip.png" alt="">
      <p class="sorry">对不起，退款失败！</p>
      <p class="fail_reason">失败原因：账户余额不足</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" v-if="isSuccess" element-loading-text="正在提交,请稍后..." v-loading.fullscreen.lock="agreeLoading" @click="submitRefund">确 定</el-button>
      <!-- <el-button type="primary" @click="topUp" v-else>去充值</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import { adminCheckPass } from '@/api/orderRefund'
export default {
  // props: ["refundId", "orderId"],
  props: {
    refundId: {
      type: String,
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogTitle: '同意退款',
      dialogVisible: false,
      isSuccess: true,
      agreeLoading: false
    }
  },
  methods: {
    close() {
      this.dialogVisible = false
      this.agreeLoading = false
    },
    submitRefund() {
      this.agreeLoading = true
      adminCheckPass(this.refundId)
        .then((res) => {
          this.close()
          this.$parent.getList()
        })
        .catch((error) => {
          if (error.status === 101) {
            this.isSuccess = false
          }
          this.agreeLoading = false
        })
    },
    topUp() {
      let routeData = this.$router.resolve({
        name: 'recharge'
      })
      window.open(routeData.href, '_blank')
    },
    toDetails() {
      this.close()
      const id = this.orderId
      this.$router.push({ name: 'financeRefundDetail', params: { id }})
    }
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.fontDiv p {
  line-height: 30px;
}

.sorry {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.fail_reason {
  font-size: 14px;
  color: #666666;
}
</style>
